<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    Hexo+github搭建自己的专属博客 |
    
    M_W_Q</title>
  
    <link rel="shortcut icon" href="/bolg/favicon.ico">
  
  <link rel="stylesheet" href="/bolg/css/style.css">
  
    <link rel="stylesheet" href="/bolg/fancybox/jquery.fancybox.min.css">
  
  <script src="/bolg/js/pace.min.js"></script>
</head>

<body>
<main class="content">
  <section class="outer">
  

<article id="post-Hexo+github搭建自己的专属博客" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Hexo+github搭建自己的专属博客
    </h1>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/bolg/2019/10/21/Hexo+github%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E4%B8%93%E5%B1%9E%E5%8D%9A%E5%AE%A2/" class="article-date">
  <time datetime="2019-10-21T14:06:44.887Z" itemprop="datePublished">2019-10-21</time>
</a>
        
      </div>
    

    
      
    <div class="tocbot"></div>





    

    <div class="article-entry" itemprop="articleBody">
      


      

      
        <h2 id="Hexo是什么？"><a href="#Hexo是什么？" class="headerlink" title="Hexo是什么？"></a><em>Hexo是什么？</em></h2><p>  简单的来说<a href="https://hexo.io/docs/" target="_blank" rel="noopener">hexo</a>是一个博客框架，它可以快速的帮助你搭建一个博客。它会将你写的博客快速的转换成静态文件。类似现在前后台分离使用的shepherd。</p>
<h2 id="安装环境"><a href="#安装环境" class="headerlink" title="安装环境"></a><em>安装环境</em></h2><p>它的安装需要一定的环境如下：</p>
<table>
<thead>
<tr>
<th align="right">环境</th>
<th align="right">Node.js</th>
<th align="right">git</th>
<th>npm</th>
</tr>
</thead>
<tbody><tr>
<td align="right">版本</td>
<td align="right">&lt; 7.0</td>
<td align="right">不限</td>
<td>不限</td>
</tr>
<tr>
<td align="right">验证安装</td>
<td align="right">node -v</td>
<td align="right">git –verison</td>
<td>npm -v</td>
</tr>
</tbody></table>
<p>一般情况你在安装的时候node.js和npm是在一起的不需要单独的下载。</p>
<h2 id="Node-js的安装"><a href="#Node-js的安装" class="headerlink" title="Node.js的安装"></a><em>Node.js的安装</em></h2><p>  我只讲讲在mac和linux环境中的搭建，实在抱歉没时间去windows中去验证。（windows大家可以参考这个<a href="http://www.runoob.com/nodejs/nodejs-install-setup.html" target="_blank" rel="noopener">Windows搭建node</a>）</p>
<ol>
<li><p>如下图的<a href="https://nodejs.org/en/download/" target="_blank" rel="noopener">Node.js</a>的官方网站下载<br><img src="http://upload-images.jianshu.io/upload_images/5862120-3b508a8d7437f074.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="enter image description here"></p>
</li>
<li><p>安装nvm在Mac环境下</p>
<pre><code>wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.2/install.sh | bash</code></pre></li>
</ol>
<p>  来进行nvm安装提出这个东西完全是这东西是非常好的mac软件安装管理工具，例如Ubuntu的apt-get和centos的yum。</p>
<ol start="3">
<li><p>安装node.js 和 npm</p>
<pre><code>nvm install 6.9.1    #仅仅需要这个
nvm install ls       #看看当前你安装的有哪些版本
nvm use 6.9.1        #使用哪个版本</code></pre></li>
</ol>
<p>  我们仅仅需要这样一个命令就能完成对node的安装。当然还有其他的非常好用的命令，有兴趣的可以自己去探索，在这里这些不重要，你只需要知道这一个就好。一般情况node和npm是集成的所以node成功npm也就成功了。</p>
<h2 id="安装-git"><a href="#安装-git" class="headerlink" title="安装 git"></a><strong>安装 git</strong></h2><ol>
<li><p>安装 git </p>
<pre><code>sudo brew install git</code></pre></li>
</ol>
<p>  相信大家都不陌生就不都说了，git这东西估计开发人员都有在使用。就不在啰嗦了。不太清楚的可以google也可以使用文末我的邮箱来询问我。</p>
<ol start="2">
<li><p>生成SSH key</p>
<pre><code>ssh-keygen -t rsa -C  &quot;xxxx.163.com&quot;</code></pre></li>
</ol>
<p>  其实”xxx.163.com”只是个邮箱你随意，一般和github的注册邮箱一样。然后在根目录下生成.ssh的文件夹。（centos是在/目录下，mac在你的用户的根目录）</p>
<p>如图：id_rsa是你的私匙，id_rsa.pub是你的公匙一会要在github中使用<img src="http://upload-images.jianshu.io/upload_images/5862120-076cfd5cd46b6a98.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="enter image description here"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/5862120-1545624450dfbab4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="enter image description here"></p>
<p>key就是在github上添加id_rsa.pub中内容的位置，title这个不重要你写什么也可以只要自己方便分辨就好。</p>
<h2 id="github上创建一个仓库"><a href="#github上创建一个仓库" class="headerlink" title="github上创建一个仓库"></a><strong>github上创建一个仓库</strong></h2><ul>
<li><p>下图就是你新建的仓库的命名（命名一定要和Owner名字相同然后多加了一个github.io的后缀，这点很重要。）<br><img src="http://upload-images.jianshu.io/upload_images/5862120-5061b3adfad7ee40.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="enter image description here"></p>
</li>
<li><p>仓库创建成功后需要记得这个地址，当然你也可以在后面用到的时候在到github中查看<img src="http://upload-images.jianshu.io/upload_images/5862120-ee280afd00085373.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
</li>
</ul>
<h2 id="查看的环境"><a href="#查看的环境" class="headerlink" title="查看的环境"></a><strong>查看的环境</strong></h2><ul>
<li><p>npm是否成功运行</p>
<pre><code>npm -v</code></pre></li>
<li><p>node是否成功，并且版本是否低于7.0</p>
<pre><code>node -v</code></pre></li>
<li><p>github是否成功</p>
<pre><code>git --version</code></pre></li>
</ul>
<p>  如果每个都能显示出版本号，那恭喜你基本的环境已经完成，你马上就可以拥有自己的博客家园了，下面我就请出我们今天的主角Hexo。</p>
<h2 id="Hexo的安装"><a href="#Hexo的安装" class="headerlink" title="Hexo的安装"></a><strong>Hexo的安装</strong></h2><ul>
<li><p>这个仅仅需要一条命令</p>
<pre><code>npm install -g hexo-cli</code></pre></li>
<li><p>是不是感觉简单到爆，就这样你的基本博客环境就已经搭建起来了。</p>
</li>
</ul>
<h2 id="开始搭建博客"><a href="#开始搭建博客" class="headerlink" title="开始搭建博客"></a><strong>开始搭建博客</strong></h2><ul>
<li><p>   hexo init   [name]      ##初始化仓库</p>
</li>
<li><p>name是选择输入的，你可以输入你想的名字，然后初始化的东西就放在你的name下。</p>
<pre><code>cd name       ##进入name目录查看生成的目录</code></pre></li>
<li><p>下图就是里面的文件目录，当前最重要的是_config.yml文件<img src="http://upload-images.jianshu.io/upload_images/5862120-6bcd2eb73b83f954.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<pre><code>vim _config.yml    ##进入到文件的编辑中</code></pre></li>
<li><p>找到下图中位置将里面的东西添加到你的文件中，记得将repository中的地址换成上面让你记的那个地址，那是你的github仓库地址。<img src="http://upload-images.jianshu.io/upload_images/5862120-e0d7e3c262b42934.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
</li>
</ul>
<h2 id="开始使用hexo"><a href="#开始使用hexo" class="headerlink" title="开始使用hexo"></a><strong>开始使用hexo</strong></h2><ul>
<li><p>使用generate来生成静态文件</p>
<pre><code>hexo generate</code></pre></li>
<li><p>使用deploy来提交到github上，就是将其部署。</p>
<pre><code>hexo deploy</code></pre></li>
<li><p>此时你已经成功的部署到线上了，你可以使用<a href="http://mawenqiang.github.io来进行访问。" target="_blank" rel="noopener">http://mawenqiang.github.io来进行访问。</a></p>
</li>
<li><p>本地调试执行下面的命令，然后使用<a href="http://localhost:4000来进行本地的访问" target="_blank" rel="noopener">http://localhost:4000来进行本地的访问</a></p>
<pre><code>hexo server</code></pre></li>
</ul>
<h2 id="经常使用的命令"><a href="#经常使用的命令" class="headerlink" title="经常使用的命令"></a><strong>经常使用的命令</strong></h2><ul>
<li><p>下面的命令是进出需要用到的</p>
<pre><code>hexo generate       ##生成静态文件
hexo deploy         ##部署到线上
hexo sever          ##本地查看
hexo new &quot;新的文章名&quot; ##新建文章</code></pre></li>
<li><p>新文件存放在 source/_posts文件中</p>
</li>
</ul>
<h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a><strong>问题</strong></h2><ul>
<li>在部署的时候可能会遇到很多问题，如果解决不了可以将问题发送到我的邮箱，这里就不一一的列举问题了。</li>
<li>hexo中还有很多的命令可以使用，有兴趣的可以自己探索一下。</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://m_aleen.gitee.io/bolg/2019/10/21/Hexo+github%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E4%B8%93%E5%B1%9E%E5%8D%9A%E5%AE%A2/" data-id="ck32z8ytk000169db90audn5a"
         class="article-share-link">Share</a>
      
    </footer>

  </div>

  
    
  <nav class="article-nav">
    
      <a href="/bolg/2019/10/21/hello-world/" class="article-nav-link">
        <strong class="article-nav-caption">Newer posts</strong>
        <div class="article-nav-title">
          
            Hello World
          
        </div>
      </a>
    
    
      <a href="/bolg/2019/10/21/%E5%8F%AF%E9%87%8D%E5%A4%8D%E6%89%A7%E8%A1%8C/" class="article-nav-link">
        <strong class="article-nav-caption">Olde posts</strong>
        <div class="article-nav-title">可重复执行</div>
      </a>
    
  </nav>


  

  
    
  

</article>



</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
    <li><i class="fe fe-bookmark"></i> <span id="busuanzi_value_page_pv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2019 M_W_Q</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a href="https://github.com/zhwangart/hexo-theme-ocean" target="_blank" rel="noopener">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>

<aside class="sidebar sidebar-specter">
  
    <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/bolg/"><img src="/bolg/images/hexo.svg" alt="M_W_Q"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/bolg/">Home</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/bolg/archives">Archives</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/bolg/gallery">Gallery</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/bolg/about">About</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        Search
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/bolg/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
  </aside>
  <script src="/bolg/js/jquery-2.0.3.min.js"></script>
<script src="/bolg/js/jquery.justifiedGallery.min.js"></script>
<script src="/bolg/js/lazyload.min.js"></script>
<script src="/bolg/js/busuanzi-2.3.pure.min.js"></script>

  <script src="/bolg/fancybox/jquery.fancybox.min.js"></script>



  <script src="/bolg/js/tocbot.min.js"></script>
  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>


<script src="/bolg/js/ocean.js"></script>

</body>
</html>